<template>
  <div class="suspense_box">
    <h3>父组件</h3>
    <Suspense>
      <template #default>
        <AsyncComp></AsyncComp>
      </template>
      <template #fallback> loading... </template>
    </Suspense>
  </div>
</template>

<script>
import { defineAsyncComponent } from 'vue';

export default {
  components: {
    AsyncComp: defineAsyncComponent(() => import(/*webpackChunkName:'Async'*/ '../components/Async.vue'))
  },
  setup() {}
};
</script>

<style lang="scss" scoped>
@use '@/styles/mixin' as Minxs;
.suspense_box {
  @include Minxs.mainWidth;
  background-color: #f2f2f2;
  padding: 16px;

  .loading {
    height: 100px;
    text-align: center;
    line-height: 100px;
  }
}
</style>
